<template>
  <el-dialog v-model="dialogVisible" title="装箱明细" width="1300px">
    <el-table ref="multipleTable" :data="packBoxList">
      <el-table-column type="index" width="40" />
      <el-table-column align="left" label="存货编码" width="280">
        <template #default="scope">
          <p style="margin: 0px">编码：{{ scope.row.invcode }}</p>
          <p style="margin: 0px; font-weight: 600">
            名称：{{ scope.row.invname }}
          </p>
        </template>
      </el-table-column>
      <el-table-column align="left" label="规格型号" prop="invspec" width="120" />
      <el-table-column align="left" label="批次号" prop="invbatch" width="180" />
      <el-table-column align="left" label="数量" prop="mesQty" width="180">
        <template #default="scope">
          <el-input-number v-model="scope.row.mesQty" :max="scope.row.mesQty" :min="1" :precision="0"/>
        </template>
      </el-table-column>
      <el-table-column align="left" label="条码类型" prop="barcodeType" width="100" />
      <el-table-column align="left" label="单位" prop="measName" width="80" />
      <el-table-column align="left" label="仓库" prop="whName" width="180" />
      <el-table-column align="left" label="创建信息" width="220">
        <template #default="scope">
          <p style="margin: 0px; font-weight: 600; color: #003366">
            {{ scope.row.createUser }}
          </p>
          <p style="margin: 0px; font-weight: 600; color: #003399">
            {{ scope.row.createTime }}
          </p>
        </template>
      </el-table-column>
    </el-table>
    <template #footer>
      <el-button plain type="primary" @click="toAddPackBox">
        <vab-icon icon="save-line" />
        装箱
      </el-button>
    </template>
  </el-dialog>
</template>

<script setup>
  import {barcodePackingApi} from '@/api/kc/barcode_xc'
  import hiPrint from '@/utils/hiPrint.js'
  const $baseLoading = inject('$baseLoading')
  const $baseMessage = inject('$baseMessage')
  const dialogVisible = ref(false)
  const packBoxList = ref()
  const packBoxInfo = ref()

  const openPackBoxDetail = (barcodeList) => {
    if (barcodeList) {
      dialogVisible.value = true
      packBoxList.value = barcodeList
    }
  }

  const toAddPackBox = async () => {
    const load = $baseLoading()
    try{
      const { code, data, msg } = await barcodePackingApi(packBoxList.value)
      if (code === 2000) {
        dialogVisible.value = false
        packBoxInfo.value = data
        toPrintUnBox()
        $baseMessage(msg, 'success')
        _emit('packbox-success-callback')
      } else {
        $baseMessage(msg, 'error')
      }
    }finally{
      load.close()
    }
  }

  const toPrintUnBox = () => {
    hiPrint('bar_001', [packBoxInfo.value])
  }

  defineExpose({ openPackBoxDetail })
  const _emit = defineEmits(['packbox-success-callback'])
</script>
